<!-- 签字完成 签约成功-->
<template>
  <cu-layout :navProp="{ placeholder: true, title: '' }" :bgStyle="{ color: '#ffffff' }">
    <view :class="[`${prefixCls}-search-page-container`]">
      <template v-if="status === 0">
        <view class="message">
          <image class="avatar" :src="$CDN('/common/static/images/no-qianyue.png')"></image>
          <view class="staus-status">签约失败</view>
          <text class="tips">请稍后重试！</text>
        </view>
        <view class="btn" @click="handleJump()">返回我的合同</view>
      </template>
      <template v-else-if="status === 1">
        <view class="message">
          <image class="avatar" :src="$CDN('/common/static/images/img-qianyue.png')"></image>
          <view class="staus-status">恭喜您！签约成功~</view>
          <text class="tips">请尽快缴纳首期款办理入住哦</text>
        </view>
        <view class="btn" @click="handlePayment">去缴纳首期款</view>
      </template>
      <template v-else> </template>
    </view>
  </cu-layout>
</template>

<script>
import { bestNotify, renewNotify } from '@/api/bestSign'
import { mapActions, mapGetters } from 'vuex'

export default {
  name: 'searchPage',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      text: '',
      history: [],
      hotList: [],
      searchList: [],
      status: 2, // 0为失败 1为成功 2为空页面
      contractId: '',
      // 目前只有成功状态
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters(['cityConfig', 'locationInfo']),
  },
  // 监听页面加载，该钩子被调用时data,computed,function,watch,props,slots已设置完成
  onLoad(options) {
    // console.log('options', options)
    this.getData()
  },
  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {},
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  // 下拉刷新
  onPullDownRefresh() {},
  // 加载更多
  onReachBottom() {},

  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    ...mapActions([]),
    async getData() {
      const { code, signID, usertype, id, sign } = this.$Route.query
      this.sign = sign
      // 签约
      if (sign == 1) {
        const { data, errcode } = await bestNotify({ code, signID, usertype, id })
        if (errcode === 0) {
          this.status = 1
          this.contractId = data.contractId
        } else {
          this.status = 0
          uni.$uv.toast(errmsg)
        }
      } else if (sign == 2) {
        // 续签
        const { data, errcode, errmsg } = await renewNotify({ id })
        if (errcode === 0) {
          // 续签需要调用完这个接口之后直接跳转到合同列表
          this.status = 2
          uni.$uv.toast('续签成功！')
          setTimeout(() => {
            this.handleJump()
          }, 1500)
        } else {
          this.status = 0
          uni.$uv.toast(errmsg)
        }
      }
    },
    handlePayment() {
      const { signID = '', code = '' } = this.$Route.query
      this.$ROUTE.go('/pages/subpackage/bill/down-payment', { contractId: this.contractId, signID, code })
    },
    handleJump() {
      uni.redirectTo({ url: '/pages/subpackage/contract/index' })
    },
  },
}
</script>

<style lang="scss" scoped>
.#{prefixCls('search-page-container')} {
  width: 100%;
  background: white;
  box-sizing: border-box;
  padding: 0 30rpx;
  height: calc(-44px + 100vh);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 100px;
  .avatar {
    width: 267px;
    height: 196px;
    margin-bottom: 20px;
  }
  .message {
    text-align: center;
    .staus-status {
      font-size: 32rpx;
      margin-bottom: 10px;
    }
    .tips {
      color: #999999;
      font-size: 24rpx;
    }
  }
  .btn {
    width: 230px;
    background: $uv-primary;
    text-align: center;
    padding: 10px 0;
    border-radius: 8rpx;
    margin-top: 15px;
    color: white;
  }
}
</style>
